<template>
	<div class="content">
		<div class="category">
			<div
			:class="{ 'category_item':true, 'category_item--active': currentTab === item.tab }"
			v-for="item in categories"
			:key="item.name"
			@click="() => handleCategoryClick(item.tab)"
			>
			{{item.name}}
			</div>
		</div>
		<div class="product">
			<div 
			class="product_item"
			v-for="item in contentList"
			:key="item._id"
			>
				<img class="product_item_img" :src="item.imgUrl">
				<div class="product_item_detail">
					<h4 class="product_item_title">{{ item.name }}</h4>
					<p class="product_item_sales">月售{{ item.sales }}件</p>
					<p class="product_item_price">
						<span class="product_item_yen">&yen;</span>{{ item.price }}
						<span class="product_item_origin">&yen;{{ item.oldPrice }}</span>
					</p>
				</div>
				<div class="product_number">
					<span class="product_number_minus" @click="addItem(shopId,item._id,item,-1,shopName)">-</span>
					{{ cartList?.[shopId]?.productList?.[item._id]?.count || 0 }}
					<span class="product_number_plus" @click="addItem(shopId,item._id,item,1,shopName)">+</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { toRefs,reactive } from 'vue'
	import { useRoute } from 'vue-router'
	import { get } from '../../utils/request.js'
	import { useStore } from 'vuex'
	export default{
		name: 'Content',
		props: ['shopName'],
		setup() {
			// store就是vuex当中所有的对象都包含在其中
			const store = useStore()
			// cartList所有产品都在其中，拿到这个，我们就可以在页面中展示产品的数量
			const cartList = store.state.cartList
			// 获取路由参数
			const route = useRoute();
			// 获取当前商品ID
			const shopId = route.params.id
			// 添加一个加号的方法
			const addItem = (shopId,productId,productInfo,num,shopName) => {
				store.commit('addItem',{shopId,productId,productInfo,num,shopName})
			}
			// categories存放分类信息
			const categories = [
				{name: '全部商品',tab: 'all'},
				{name: '秒杀',tab: 'seckill'},
				{name: '新鲜水果',tab: 'fruit'},
				{name: '休闲食品',tab: 'snacks'}
			]
			const data = reactive({
				// currentTab用于存放当前选中的分类tab
				currentTab:categories[0].tab,
				// contentList用于存放后端回调的商品详细信息
				contentList:[]
			})
			const getContentList = async(tab) => {
				// result用于存放从后端回调的商品详细信息
				const result = await get('/api/products',{shopId,tab})
				console.log(result)
				// 如果存在errno则存储数据
				if(result?.errno === 0){
					data.contentList = result.data
				}
			}
			// 更改选中高亮显示
			const handleCategoryClick = (tab) => {
				getContentList(tab)
				data.currentTab = tab
			}
			// 调用方法
			getContentList('all')
			// 将响应式对象中的所有属性转换为单独的响应式数据
			const { contentList,currentTab } = toRefs(data)
			return { contentList,categories,currentTab,handleCategoryClick,cartList,shopId,addItem }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		top: 1.5rem;
		bottom: .5rem;
	}
	.category {
		overflow-y: scroll;
		height: 100%;
		width: .76rem;
		background: #F5F5F5;
		&_item {
			line-height: .4rem;
			text-align: center;
			font-size: 14px;
			color: #333;
			&--active {
				background: #FFF;
			}
		}
	}
	.product {
		overflow-y: scroll;
		flex: 1;
		&_item {
			position: relative;
			display: flex;
			padding: .12rem 0;
			margin: 0 .16rem;
			border-bottom: .01rem solid #F1F1F1;
			&_img {
				width: .68rem;
				height: .68rem;
				margin-right: .16rem;
			}
			&_title {
				margin: 0;
				line-height: .2rem;
				font-size: .14rem;
				color: #333;
			}
			&_sales {
				margin: .06rem 0;
				font-size: .12rem;
				color: #333;
			}
			&_price {
				margin:0;
				line-height: .2rem;
				font-size: .14rem;
				color: #E93B3B;
			}
			&_yen {
				font-size: .12rem;
			}
			&_origin {
				margin-left: .06rem;
				line-height: .2rem;
				font-size: .12rem;
				color: #999;
				text-decoration: line-through;
			}
		}
		.product_number {
			position: absolute;
			right: 0;
			bottom: .12rem;
			&_minus,&_plus {
				display: inline-block;
				width: .2rem;
				height: .2rem;
				line-height: .16rem;
				border-radius: 50%;
				font-size: .2rem;
				text-align: center;
			}
			&_minus {
				border: .01rem solid #666;
				color: #666;
				margin-right: .05rem;
			}
			&_plus {
				background: #0091FF;
				color: #FFF;
				margin-left: .05rem;
			}
		}
	}
</style>
